<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>重渡沟官方网站</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/home.css">
    <link rel="stylesheet" href="css/notice_interface.css">
    <link rel="stylesheet" href="css/user_interface.css">
    <link rel="stylesheet" href="css/staff_interface.css">
</head>
<body>
<!--头部区域-->
<div id="app">
    <div class="header">
        <div class="wrapper">
            <div class="welcome">重渡沟欢迎您！</div>
            <div class="reserve">
                <a href="#">请游客提前在“重渡沟”官方微信公众号进行预约</a>
                <a href="#" class="weixin"><img src="images/weixin.png" alt=""></a>
                <a href="#" class="tao"><img src="images/tao.png" alt=""></a>
            </div>
        </div>
    </div>
    <!--导航区域-->
    <div class="nav wrapper">
        <a href="index.html" class="logo">重渡沟</a>
        <ul>
            <li><a href="#" @click="response_home_btn">首页</a></li>
            <li><a href="#" @click="soon">重渡服务</a></li>
            <li><a href="#" @click="soon">重渡公开</a></li>
            <li><a href="#" @click="soon">重渡美图</a></li>
            <li><a href="#" @click="btn.btn_nav='user'">个人中心</a></li>
            <li><a href="#" @click="soon">职工入口</a></li>
            <li><a href="#" @click="soon">关于重渡</a></li>
        </ul>
        <div class="search">
            <input type="text" placeholder="请输入搜索内容">
            <a href="#" class="fa fa-search" aria-hidden="true" style="font-size: 15px; color: #009d4b"></a>
        </div>
    </div>
    <div id="home" v-show="btn.btn_nav === 'home'">
        <!--banner区域-->
        <div class="banner">
            <div class="wrapper">
                <div class="img1"></div>
                <div class="img2"></div>
                <div class="img3"></div>
                <div class="img4"></div>
            </div>
        </div>
        <!--service区域-->
        <div class="service">
            <div class="hd"><h2>重渡服务</h2></div>
            <div class="bd">
                <div class="info" id="info">
                    <dl class="time">
                        <dt>游览时间</dt>
                        <dd>{{baseInfo.tourInfo}}</dd>
                    </dl>
                    <dl class="price">
                        <dt>票务信息</dt>
                        <dd>{{baseInfo.ticketInfo}}</dd>
                    </dl>
                </div>
                <div class="map"></div>
                <div class="ticketing">
                    <h3>公众号购票</h3>
                    <div class="code"></div>
                </div>
            </div>
        </div>
    </div>
<!--    &lt;!&ndash;公告区域&ndash;&gt;-->
<!--    <div id="notice" v-show="btn.btn_nav === 'notice'">-->
<!--        <ul>-->
<!--            <li v-for="(notice, index) in notices" :key="notice._infoNo">-->
<!--                <a href="#" @click="notice_detail(notice._infoNo)">-->
<!--                    {{index+1}}.{{notice._title}}-->
<!--                    <i class="fa fa-angle-double-right" aria-hidden="true" style="font-size: 20px"></i>-->
<!--                    <i class="fa fa-angle-double-right" aria-hidden="true" style="font-size: 20px"></i>-->
<!--                </a>-->
<!--                <div>{{notice._date}}</div>-->
<!--            </li>-->
<!--        </ul>-->
<!--    </div>-->
<!--    &lt;!&ndash;公告细节&ndash;&gt;-->
<!--    <div id="notice_detail" v-show="btn.btn_nav === 'detail'">-->
<!--        <a href="#" @click="btn.btn_nav='notice'">-->
<!--            返回-->
<!--            <i class="fa fa-angle-double-left" aria-hidden="true" style="font-size: 20px"></i>-->
<!--        </a>-->
<!--        <div style="padding: 10px 8px">-->
<!--            <h2>{{notice._title}}</h2>-->
<!--            <p>{{notice._date}}</p>-->
<!--            <textarea disabled="disabled">{{notice._info}}</textarea>-->
<!--        </div>-->
<!--    </div>-->
    <!--个人中心区域-->
    <div id="user" v-show="btn.btn_nav === 'user'">
        <!--登陆区域-->
        <div id="login" v-show="btn.btn_user === 'user_login'">
            <h2>欢迎登录~</h2>
            <form action="" method="post">
                <div>
                    <label for="login_userNo">账号：</label>
                    <input type="text" v-model:value="user.user.userNo" name="userNo" id="login_userNo" placeholder="请输入账号">
                </div>
                <div>
                    <label for="login_password">密码：</label>
                    <input type="password" v-model:value="user.user.password" name="password" id="login_password" placeholder="请输入密码">
                </div>
                <div>
                    <input type="button" @click="user_login" value="登录"><a href="#" @click="btn.btn_user='user_register'">注册</a>
                </div>
            </form>
        </div>
        <!--注册区域-->
        <div id="register" v-show="btn.btn_user === 'user_register'">
            <h2>欢迎注册~</h2>
            <form action="" method="post">
                <div>
                    <label for="register_userNo">账号：</label>
                    <input type="text" v-model:value="user.register_user.userNo" name="userNo" id="register_userNo" placeholder="请输入账号">
                </div>
                <div>
                    <label for="register_username">昵称：</label>
                    <input type="text" v-model:value="user.register_user.name" name="username" id="register_username" placeholder="请输入昵称">
                </div>
                <div>
                    <label for="register_password">密码：</label>
                    <input type="password" v-model:value="user.register_user.password" name="password" id="register_password" placeholder="请输入密码">
                </div>
                <div>
                    <a href="#" @click="btn.btn_user='user_login'">已有帐号？点击登录</a><input type="button" @click="user_register" value="注册">
                </div>
            </form>
        </div>
        <!--用户界面区域-->
        <div id="user_center" v-show="btn.btn_user === 'login_success'">
            <ul>
                <li><a href="#" @click="response_my_contacts">我的联系人</a></li>
                <li><a href="#" @click="response_buy_ticket">我要订票</a></li>
                <li><a href="#" @click="response_my_ticket">我的订单</a></li>
            </ul>
            <div id="contact" v-show="btn.sub_btn_user === 'contact'">
                <h2>我的联系人</h2><a href="#" @click="btn.sub_btn_user='add_contact'">添加新的联系人</a>
                <div v-show="btn.sub_btn_user_update === 'select'">
                    <div><h3>身份证号</h3><h3>姓名</h3></div>
                    <ul>
                        <li v-for="(contact, index) in user.contacts" :key="contact.id">
                            <span>{{contact.id}}</span>
                            <span>{{contact.name}}</span>
                            <div>
                                <a href="#" @click="soon">查看</a>
                                <a href="#" @click="soon">修改</a>
                                <a href="#" @click="response_delete_contact(contact.id)">删除</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div id="add_contact" v-show="btn.sub_btn_user === 'add_contact'">
                <a href="#" @click="response_return_add_contacts">
                    返回
                    <i class="fa fa-angle-double-left" aria-hidden="true" style="font-size: 20px"></i>
                </a>
                <div>
                    <div>
                        <label for="input_trueName">联系人姓名：</label>
                        <input type="text" id="input_trueName" v-model:value="user.new_contact.name">
                    </div>
                    <div>
                        <label for="input_ID">联系人身份证号<strong>*</strong>：</label>
                        <input type="text" id="input_ID" v-model:value="user.new_contact.id">
                    </div>
                    <a href="#" @click="response_new_contact">确定</a>
                </div>
            </div>
            <div id="buy_ticket" v-show="btn.sub_btn_user === 'buy_ticket'">
                <h2>欢迎购票</h2>
                <div>
                    <div>
                        <div v-for="(standards, index) in ticket.price_standards" :key="standards.ticketType">
                            {{standards.ticketType}}
                            ￥<strong>{{standards.price}}</strong>起/人
                        </div>
                    </div>
                    <div>
                        选择出行日期：
                        <input type="date" v-bind:min="today" v-bind:max="max_day" v-model:value="ticket.new_ticket_online.createDate">
                    </div>
                    <div>
                        选择购票类型：
                        <select v-model="ticket.new_ticket_online.ticketType">
                            <option value="">请选择票种</option>
                            <option v-for="(standard, index) in ticket.price_standards" :key="standard.ticketType" :value="standard.ticketType">
                                {{standard.ticketType}}
                            </option>
                        </select>
                    </div>
                    <div>
                        选择联系人：
                        <select v-model="ticket.new_ticket_online.id">
                            <option value="">请选择联系人</option>
                            <option v-for="(contact, index) in user.contacts" :key="contact.id" :value="contact.id">
                                {{contact.id}} {{contact.name}}
                            </option>
                        </select>
                    </div>
                    <a href="#" @click="submit_buy_ticket_online">确认购票</a>
                </div>
            </div>
            <div id="my_ticket" v-show="btn.sub_btn_user === 'my_ticket'">
                <h2>我的订单</h2>
                <div>
                    <ul>
                        <li>
                            <h3>门票类型</h3>
                            <h3>购票人</h3>
                            <h3>游玩日期</h3>
                            <h3>门票状态</h3>
                        </li>
                        <li v-for="(ticket, index) in ticket.my_tickets" :key="ticket.ticketNo">
                            <a href="#" @click="soon">
                                <h3>{{ticket.ticketType}}</h3>
                                <h3>{{ticket.id}}</h3>
                                <h3>{{ticket.createDate}}</h3>
                                <h3>{{ticket.createDate < today ? "已过期" : "未使用"}}</h3>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!--版权区域-->
    <div class="copyright wrapper">
        <a href="#"><img src="images/sy2_97.png" alt=""></a>
        <a href="#"><img src="images/sy2_94.png" alt=""></a>
        <div>
            <p>河南重渡沟管理处页面版权所有ICP备案号：豫ICP备054120</p>
            <p><img src="images/batb.png" alt="">豫公网安备 11010445152号</p>
            <p>电话：123456789 传真：987654321</p>
        </div>
    </div>
</div>
</body>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script src="js/index.js"></script>
</html>